<template>
  <div style="margin-left:20px">
    <el-row>
      <el-col :span="12">
        <h3>一、穿梭框</h3>
        <div>
          <h4>1.1、基础用法</h4>
          <el-transfer v-model="value" :data="data"></el-transfer>
        </div>

      </el-col>

      <el-col :span="1">
        <div class="line"></div>
      </el-col>

      <el-col :span="11">
        <h3>二、级联选择器</h3>
        <div style="margin-top:30px">
        </div>

      </el-col>

    </el-row>

  </div>
</template>

<script>
export default {

  data () {
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0
        });
      }
      return data;
    };
    return {
      data: generateData(),
      value: [1, 4]
    };
  },

  methods: {

  }
};


</script>

<style scoped>
.line {
  border-left: 1px solid #9e9e9e;
  height: 1000px;
  margin-left: 8px;
}
</style>